<template>
  <transition
    :name="transitionName"
    :mode="mode"
    @before-enter="beforeEnter"
    @enter="enter"
    @leave="leave"
  >
    <slot />
  </transition>
</template>

<script>
export default {
  name: 'PageTransition',
  props: {
    transitionName: {
      type: String,
      default: 'fade-slide'
    },
    mode: {
      type: String,
      default: 'out-in'
    }
  },
  methods: {
    beforeEnter(el) {
      // 进入前的状态
      el.style.opacity = '0';
      el.style.transform = 'translateY(20px)';
    },
    enter(el, done) {
      // 进入动画
      setTimeout(() => {
        el.style.transition = 'all 0.3s ease-out';
        el.style.opacity = '1';
        el.style.transform = 'translateY(0)';
        done();
      }, 50);
    },
    leave(el, done) {
      // 离开动画
      el.style.transition = 'all 0.3s ease-in';
      el.style.opacity = '0';
      el.style.transform = 'translateY(-20px)';
      setTimeout(done, 300);
    }
  }
}
</script>

<style scoped>
/* 淡入淡出滑动效果 */
.fade-slide-enter-active,
.fade-slide-leave-active {
  transition: all 0.3s ease;
}

.fade-slide-enter-from {
  opacity: 0;
  transform: translateY(20px);
}

.fade-slide-leave-to {
  opacity: 0;
  transform: translateY(-20px);
}

/* 缩放效果 */
.scale-enter-active,
.scale-leave-active {
  transition: all 0.3s ease;
}

.scale-enter-from {
  opacity: 0;
  transform: scale(0.9);
}

.scale-leave-to {
  opacity: 0;
  transform: scale(1.1);
}

/* 滑动效果 */
.slide-enter-active,
.slide-leave-active {
  transition: all 0.3s ease;
}

.slide-enter-from {
  opacity: 0;
  transform: translateX(30px);
}

.slide-leave-to {
  opacity: 0;
  transform: translateX(-30px);
}
</style> 